import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Button, Modal, Input, Radio, DatePicker, Table } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import SelectForm from '@/components/SelectForm';
import AdModal from '@/components/AdModal';
import RightDraw from '@/components/RightDraw';
import AdSelect from '@/components/AdSelect';
import AdButton from '@/components/AdButton';
import ManageList from '@/components/ManageList';
import AntdFormItem from '@/components/AntdFormItem';
import AntdInput from '@/components/AntdInput';
import TableButtons from '@/components/TableButtons';
import StandardTable from '@/components/StandardTable';
import AdSearch from '@/components/AdSearch';
import { allDictList } from '@/utils/constans';
import SearchSelect from '@/components/SearchSelect';
import AntdDatePicker from '@/components/AntdDatePicker';
import AntdForm from '@/components/AntdForm';
import FileImport from '@/components/FileImport';
import { columnsUser, supplierColumns, columnsDriver, columnsAddBill } from '@/pages/Common/common';
import {
    formItemFragement,
    vitifyCheck,
    queryPerson,
    queryDict,
    formateDateToMin,
    formatPrice,
} from '@/utils/common';
import IncidentalDetail from './IncidentalDetail';
import {
    allDispatchType,
    selectIncidentalList,
    saveAllValues,
    renderTableAdSelect,
    codes,
    incidentalStatusList,
    allUrl,
    routeUrl,
    columnInci,
} from './utils';
import { billStateOnlyReadList } from '@/utils/constans';
const { confirm } = Modal;
const dateFormat = 'YYYY-MM-DD';
const dateFormatByM = 'YYYY-MM';
const { MonthPicker } = DatePicker;
const { TextArea } = Input;

import styles from './incidental.less';

@ManageList
@connect(({ incidental, loading, component }) => ({
    // trainInfoList: incidental.trainInfoList,
    incidentalList: incidental.incidentalList,

    formValues: incidental.formValues,
    dictObject: component.dictObject,
    searchValue: component.searchValue,
    loading: loading.effects[allDispatchType.list],
}))
@Form.create()
export default class IncidentalList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expandForm: false,
            visible: false,
            visibleBill: false,
            visibleAddBill: false,
            detailId: '',
            recordStatus: '',
            selectedRows: [],
            company: [],
            drivers: [],
            chooseType: '',
            visibleFile: false,
            billAdd: [],
            visibleIncident: false,
        };
        this.className = 'Incidental-table';
    }

    componentWillMount() {
        // 查询字典项
        const allDict = [allDictList.driverType, allDictList.currencyType, allDictList.otherFeeType, allDictList.costTag];
        queryDict({ props: this.props, allDict });
    }

    componentDidMount() {
        selectIncidentalList({ props: this.props });
    }

    /**
     * form 查找条件 重置
     */
    handleFormReset = () => {
        const { form, formValues } = this.props;
        const props = { props: this.props };
        this.setState({
            company: [],
            drivers: [],
        });
        form.resetFields();
        saveAllValues({ payload: { formValues: {} }, ...props });
        selectIncidentalList({ ...props });
    };

    /**
     * form 查找条件 查询
     */
    handleSearch = formValues => {
        // if (!formValues) return;
        const { company, drivers } = this.state;
        const { ownCompanyId, createTime, settlementDate, happenTime, ...param } = formValues;
        if (company.length > 0) {
            const ownCompanyId = company.map(v => {
                return v.customerCode;
            });
            param.ownCompanyId = ownCompanyId.join(',');
        }
        //付款人
        if (drivers.length > 0) {
            param.driverId = drivers[0].id;
        }
        if (settlementDate) param.settlementDate = moment(settlementDate).format(dateFormatByM);
        if (createTime && createTime.length > 0) {
            param.createTimeStart = moment(createTime[0]).format(dateFormat);
            param.createTimeEnd = moment(createTime[1]).format(dateFormat);
        } else {
            param.createTimeStart = ''
            param.createTimeEnd = ''
        }
        if (happenTime && happenTime.length > 0) {
            param.happenStartTime = moment(happenTime[0]).format(dateFormat);
            param.happenEndTime = moment(happenTime[1]).format(dateFormat);
        } else {
            param.happenEndTime = ''
            param.happenStartTime = ''
        }
        console.log('indentalist----', param)
        const params = { props: this.props, payload: param };
        saveAllValues({ payload: { formValues: param }, props: this.props });
        selectIncidentalList(params);
    };

    /**
     * table 表格 分页操作
     */
    handleStandardTableChange = param => {
        const { formValues } = this.props;

        selectIncidentalList({ payload: { ...formValues, ...param }, props: this.props });
    };

    // 查看详情
    showDetail = (e, record) => {
        e.stopPropagation();
        const recordStatus =
            record.billStatus === '' || record.billStatus === 'CONFIRM'
                ? record.source !== 'MANAGE'
                    ? true
                    : record.status == 'COMMIT'
                : true;
        this.handleStateChange([{ detailId: record.id }, { recordStatus }, { visible: true }]);
    };

    handleStateChange = (options = []) => {
        options.map(item => {
            this.setState(item);
        });
    };

    //新建
    handleAdd = () => {
        router.push(routeUrl.add);
    };

    //编辑
    handleEdit = () => {
        const { detailId } = this.state;
        this.handleStateChange([{ visible: false }]);
        router.push(`${routeUrl.edit}/${detailId}`);
    };

    columns = [
        {
            title: '单号',
            dataIndex: 'miscellaneousNo',
            render: (text, record) => (
                <AdButton
                    mode="a"
                    onClick={e => this.showDetail(e, record)}
                    text={text}
                    code={codes.showDetail}
                />
            ),
            fixed: this.props.isMobile ? false : true,
        },
        {
            title: '行车档案号',
            dataIndex: 'archivesNo',
        },
        {
            title: '账单号',
            dataIndex: 'billNo',
        },

        {
            title: '状态',
            dataIndex: 'billStatus',
            render: (text, record) => (
                <AdSelect
                    onlyRead={true}
                    value={text ? text : record.status}
                    data={text ? billStateOnlyReadList : incidentalStatusList}
                />
            ),
            width: 80,
        },
        {
            title: '车次号',
            dataIndex: 'trainName',
            width: 150,
        },
        {
            title: '所属公司',
            dataIndex: 'ownCompanyName',
            width: 250,
            render: text => <span title={text}>{text}</span>,
        },
        {
            title: '拖单号',
            dataIndex: 'transportNo',
            // render: text =>
            //     renderTableAdSelect({
            //         props: this.props,
            //         value: text,
            //         key: allDictList.otherFeeType,
            //     }),
            width: 100,
        },
        {
            title: '费用类型',
            dataIndex: 'type',
            render: text =>
                renderTableAdSelect({
                    props: this.props,
                    value: text,
                    key: allDictList.otherFeeType,
                }),
            width: 100,
        },
        {
            title: '费用标识',
            dataIndex: 'costTag',
            render: text =>
                renderTableAdSelect({
                    props: this.props,
                    value: text,
                    key: allDictList.costTag,
                }),
            width: 100,
        },
        {
            title: '结算周期',
            dataIndex: 'settlementDate',
            render: text => <span>{text}</span>,
            width: 100,
        },
        {
            title: '付款人', //对应行车档案--车次--杂费--司机
            dataIndex: 'relationObj',
            render: text => <span>{text}</span>,
            width: 150,
        },
        {
            title: '付款日期',
            dataIndex: 'happenTime',
            render: text => <span>{text ? moment(text).format('YYYY-MM-DD') : ''}</span>,
            width: 150,
        },
        {
            title: '金额(元)',
            dataIndex: 'fee',
            render: text => <span>{formatPrice(text)}</span>,
            width: 100,
        },
        {
            title: '币种',
            dataIndex: 'currency',
            render: text =>
                renderTableAdSelect({
                    props: this.props,
                    value: text,
                    key: allDictList.currencyType,
                }),
            width: 100,
        },

        {
            title: '来源',
            dataIndex: 'source',
            render: text => (
                <span>{text === 'TRAINS' ? '车次杂费' : text === 'MANAGE' ? '杂费管理' : ''}</span>
            ),
            width: 150,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            render: text => <span title={text}>{text}</span>,
            width: 100,
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            width: 100,
            render: text => (
                <AdSearch
                    label="loginName"
                    name="sysName"
                    value={this.props.searchValue[text]}
                    onlyRead={true}
                />
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            render: text => <span>{text ? moment(text).format(formateDateToMin) : ''}</span>,
        },
        {
            title: '更新人',
            dataIndex: 'updateBy',
            width: 100,
            render: text => (
                <AdSearch
                    label="loginName"
                    name="sysName"
                    value={this.props.searchValue[text]}
                    onlyRead={true}
                />
            ),
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            render: text => <span>{text ? moment(text).format(formateDateToMin) : ''}</span>,
        },
    ];

    //删除
    removeIncidental = flag => {
        const { dispatch, formValues } = this.props;
        const { detailId } = this.state;
        confirm({
            title: '确定要删除这条数据吗？',
            content: ' ',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                // console.log('type!!!!',detailId,allDispatchType.remove)
                dispatch({
                    type: allDispatchType.remove,// 'incidental/removeIncidental'
                    payload: { ids: [detailId] },
                    callback: data => {

                        if (!data) return;
                        this.setState({ visible: false });
                        selectIncidentalList({ props: this.props, payload: formValues });
                    },
                });
            },
        });
    };

    getValue = (values, type) => {
        this.setState({
            [type]: values,
        });
    };

    /**
     * 生成账单
     */
    modalOs = () => {
        this.setState(pre => ({
            visibleBill: !pre.visibleBill,
        }));
    };
    handleOk = () => {
        if (this.state.chooseType === 'all') {
            this.selectAll();
            return;
        }
        const {
            dispatch,
            formValues,
            form: { getFieldValue },
        } = this.props;
        const { selectedRows, company, drivers } = this.state;
        const isMerge = getFieldValue('isMerge');
        dispatch({
            type: allDispatchType.genBills,
            payload: { ids: selectedRows.map(v => v.id), isMerge },
            callback: data => {
                if (!data) return;
                this.setState({
                    selectedRows: [],
                });
                if (company.length > 0) {
                    const ownCompanyId = company.map(v => {
                        return v.customerCode;
                    });
                    formValues.ownCompanyId = ownCompanyId.join(',');
                }
                //付款人
                if (drivers.length > 0) {
                    formValues.driverId = drivers[0].id;
                }
                this.setState({
                    visibleBill: false,
                });
                selectIncidentalList({ props: this.props, payload: formValues });
                //跳转到账单的编辑页面
                router.push(`${routeUrl.billEdit}/${data}`);
            },
        });
    };
    generatedBills = type => {
        this.setState({
            chooseType: type,
        });
        if (type == 'all') {
            this.modalOs();
        } else {
            const { selectedRows } = this.state;
            const checkBill = this.checkBill();
            if (!checkBill) return;
            if (selectedRows && selectedRows.length > 1) {
                this.modalOs();
            } else {
                this.handleOk();
            }
        }
    };
    // 加入账单
    handleAddBills = (type) => {
        if (type) {
            this.setState(pre => ({
                visibleIncident: !pre.visibleIncident
            }));
        } else {
            this.setState(pre => ({
                visibleAddBill: !pre.visibleAddBill
            }));
        }
    }
    //加入账单 确认按钮 
    handleAddOk = () => {
        const { selectedRows, visibleAddBill } = this.state
        const {
            dispatch,
            formValues,
            form: { getFieldValue },
        } = this.props;
        const billNo = getFieldValue('billNo')[0].id
        dispatch({
            type: 'incidental/addBillConfirm',
            payload: { ids: selectedRows.map(v => v.id), billNo },
            callback: (res) => {

                this.setState({
                    selectedRows: [],
                    visibleAddBill: !visibleAddBill
                })
                selectIncidentalList({ props: this.props, payload: formValues });
            }
        })
    }
    //杂费确认 确认按钮
    handleInciOk = () => {
        const { selectedRows, visibleIncident } = this.state
        const { dispatch, formValues, } = this.props
        dispatch({
            type: 'incidental/incidentConfirm',
            payload: { ids: selectedRows.map(v => v.id) },
            callback: () => {
                this.setState({
                    selectedRows: [],
                    visibleIncident: !visibleIncident
                })
                selectIncidentalList({ props: this.props, payload: formValues });
            }
        })
    }
    /**
     * 生成账单校验 状态已提交，同一公司
     */

    checkBill = () => {
        const { selectedRows } = this.state;
        const mdsCompanyName = vitifyCheck({
            selectedRows,
            key: 'mdsCompanyName', // ownCompanyName
            warn: '所选记录必须所属公司相同！',
        });
        if (!mdsCompanyName) return false;
        return true;
    };
    selectAll = () => {
        const {
            dispatch,
            formValues,
            form: { getFieldValue },
        } = this.props;
        const { company, drivers } = this.state;
        const isMerge = getFieldValue('isMerge');
        if (company.length > 0) {
            const ownCompanyId = company.map(v => {
                return v.customerCode;
            });
            formValues.ownCompanyId = ownCompanyId.join(',');
        }
        //付款人
        if (drivers.length > 0) {
            formValues.driverId = drivers[0].id;
        }
        formValues.isMerge = isMerge;
        dispatch({
            type: 'incidental/selectAll',
            payload: formValues,
            callback: data => {
                this.setState({
                    selectedRows: [],
                });
                if (!data) return;
                this.modalOs();
                selectIncidentalList({ props: this.props, payload: formValues });
                //跳转到账单的编辑页面
                router.push(`${routeUrl.billEdit}/${data}`);
            },
        });
    };
    getIncidentalList = () => {
        selectIncidentalList({ props: this.props })
    }

    //导入
    handleImportFile = (isEXport) => {
        const { formValues, dispatch } = this.props
        const { status, type, ...allvalues } = formValues
        if (status && status.length == 1) {
            allvalues.status = status[0]
        } else if (status && status.length > 1) {
            allvalues.status = status.join(',')
        }
        if (type && type.length == 1) {
            allvalues.type = type[0]
        } else if (type && type.length > 1) {
            allvalues.type = type.join(',')
        }
        // console.log('allvalues',allvalues)
        if (isEXport) {
            dispatch({
                type: 'incidental/InfoDownload',
                payload: allvalues,
            })
        } else {
            this.setState((pre) => ({
                visibleFile: !pre.visibleFile
            }));
        }

    };

    render() {
        const { incidentalList, loading, form, isMobile, dictObject, } = this.props;
        const {
            expandForm,
            detailId,
            visible,
            visibleBill,
            visibleAddBill,
            recordStatus,
            selectedRows,
            company,
            billAdd,
            drivers,
            visibleFile,
            visibleIncident,
        } = this.state;

        const commonParams = {
            getFieldDecorator: form.getFieldDecorator,
        };
        const firstFormItem = (
            <AntdFormItem label="单号" code="miscellaneousNo" {...commonParams}>
                <TextArea disabled={disabled} rows={4} />
            </AntdFormItem>
        );
        const secondFormItem = (
            <AntdFormItem label="车次号" code="trainNo" {...commonParams}>
                <TextArea disabled={disabled} rows={4} />
            </AntdFormItem>


        );
        // secondForm 参数
        const otherFormItem = [
            [<AntdFormItem label="行车档案号" code="archivesNo" {...commonParams}>
                <TextArea disabled={disabled} rows={4} />
            </AntdFormItem>

            ],
            [
                <AntdFormItem label="所属公司" code="ownCompanyId" {...commonParams}>
                    <SearchSelect
                        dataUrl={allUrl.companyList}
                        selectedData={company} // 选中值
                        multiple={false} // 是否多选
                        showValue="customerName"
                        searchName="customerName"
                        columns={supplierColumns} // 表格展示列
                        onChange={values => this.getValue(values, 'company')} // 获取选中值
                        scrollX={400}
                        allowClear={true}
                        id="IncidentalOperate_2"
                        disabled={disabled}
                    />
                </AntdFormItem>,
                <AntdFormItem label="付款人" code="driverId" {...commonParams}>
                    <SearchSelect
                        dataUrl="/tms/tms-driver-incidental/selectDriverList"
                        //dataUrl="/tms/tms-driver-incidental/selectDriverView_s"
                        selectedData={drivers} // 选中值
                        multiple={false}
                        // showValue="sysName"
                        allowClear={true}
                        // searchName="keyWord"
                        columns={columnsDriver} // 表格展示列
                        onChange={val => this.getValue(val, 'drivers')} // 获取选中值
                        id="TmsRole_1_1"
                        scrollX={400}
                        disabled={disabled}
                    />
                </AntdFormItem>,
                <AntdFormItem label="创建时间" code="createTime" {...commonParams}>
                    <AntdDatePicker mode="range" />
                </AntdFormItem>,
            ],
            [
                <AntdFormItem label="结算周期" code="settlementDate" {...commonParams}>
                    <MonthPicker style={{ width: '100%' }} />
                </AntdFormItem>,
                <AntdFormItem label="备注" code="remark" {...commonParams}>
                    <Input />
                </AntdFormItem>,
                <AntdFormItem label="费用时间" code="happenTime" {...commonParams}>
                    <AntdDatePicker mode="range" />
                </AntdFormItem>,

            ],
            [
                <AntdFormItem label="费用标识" code="costTag" {...commonParams}>
                    <AdSelect payload={{ code: allDictList.costTag }} mode="multiple" />
                </AntdFormItem>,
                <AntdFormItem label="拖单号" code="transportNo" {...commonParams}>
                    {/* <AdSelect payload={{ code: allDictList.currencyType }} /> */}
                    <Input />
                </AntdFormItem>,
                <AntdFormItem label="币种" code="currency" {...commonParams}>
                    <AdSelect payload={{ code: allDictList.currencyType }} />
                </AntdFormItem>,

            ],
            [
                <AntdFormItem label="状态" code="status" {...commonParams}>
                    <AdSelect isExist={true} data={incidentalStatusList} mode="multiple" />
                </AntdFormItem>,
                <AntdFormItem label="费用类型" code="type" {...commonParams}>
                    <AdSelect payload={{ code: allDictList.otherFeeType }} mode='multiple' />
                </AntdFormItem>,
                <AntdFormItem label="司机类型" code="driverType" {...commonParams}>
                    <AdSelect payload={{ code: allDictList.driverType }} />
                </AntdFormItem>,

            ],
            [
                'operatorButtons'
            ]
        ];
        const selectFormParams = {
            firstFormItem,
            secondFormItem,
            otherFormItem,
            form,
            className: this.className,
            handleFormReset: this.handleFormReset,
            handleSearch: this.handleSearch,
            toggleForm: expandForm => {
                this.handleStateChange([{ expandForm }]);
            },
            code: codes.select,
        };
        const tableButtonsParams = {
            handleAdd: this.handleAdd,
            code: codes.add,
            selectedLength: selectedRows.length,
            pagination: incidentalList.pagination,
            code: codes.bill,
            selectAll: () => this.generatedBills('all'),
            buttons: (
                <Button.Group>
                    <AdButton onClick={() => this.handleImportFile()} text="导入" code={codes.import} />
                    <AdButton onClick={() => this.handleImportFile('export')} text="导出" code={codes.import} />
                    <AdButton
                        disabled={!selectedRows.length > 0 || selectedRows.some(v => v.status === 'UNSEALED')}
                        onClick={() => this.generatedBills('single')}
                        text={`生成账单${selectedRows.length > 0 ? '(' + selectedRows.length + ')' : ''}`}
                        code={codes.bill}
                    />
                    <AdButton
                        disabled={!selectedRows.length > 0 || selectedRows.some(v => v.status === 'UNSEALED')}
                        onClick={() => this.handleAddBills()}
                        text="加入账单" code={codes.import}
                    />
                    <AdButton
                        disabled={!selectedRows.length > 0 || selectedRows.every(v => v.status !== 'UNSEALED')}
                        onClick={() => this.handleAddBills('inciConfirm')}
                        text="杂费确认" code={codes.import}
                    />

                </Button.Group>
            ),
        };

        // 详情 参数
        const disabled = recordStatus;
        const rightDrawParams = {
            isMobile,
            visible,
            title: '杂费详情',
            code: codes.showDetail,
            closeDetail: this.handleStateChange.bind(this, [{ visible: false }]),
            buttons: (
                <>
                    <AdButton
                        onClick={() => this.removeIncidental(1)}
                        disabled={disabled}
                        text="删除"
                        type="danger"
                        ghost
                        code={codes.remove}
                    />
                    <Button.Group style={{ marginLeft: 8 }}>
                        <AdButton
                            type="primary"
                            onClick={this.handleEdit}
                            disabled={disabled}
                            text="编辑"
                            code={codes.edit}
                        />
                    </Button.Group>
                </>
            ),
        };

        const formItem = [
            [
                <AntdFormItem
                    label="是否合并费用科目."
                    code="isMerge"
                    initialValue={false}
                    rules={[{ required: true }]}
                    {...commonParams}
                >
                    <Radio.Group>
                        <Radio value={false}>
                            否
            </Radio>
                        <Radio value={true}>
                            是
            </Radio>
                    </Radio.Group>
                </AntdFormItem>,
            ],
        ];

        const formItemAdd = [
            [
                <AntdFormItem
                    label="单据号"
                    code="billNo"
                    initialValue={false}
                    rules={[{ required: true }]}
                    {...commonParams}
                >
                    <SearchSelect
                        dataUrl={'/tms/tms-bill/selectTmsBillList'}
                        selectedData={billAdd} // 选中值
                        showValue="billNo"
                        searchName="billNo"
                        multiple={false}
                        columns={columnsAddBill}
                        onChange={values => this.getValue(values, 'billNo')}
                        id="addBillNo"
                        allowClear={true}
                        scrollX={200}
                    />
                </AntdFormItem>,
            ],
        ];

        return (
            <div>
                <FileImport
                    visibleFile={visibleFile}
                    handleCancel={() => {
                        this.handleImportFile();
                    }}
                    urlImport={`tms/tms-miscellaneous/General/importExcel`}
                    urlCase={`attachment/中港车杂费导入模板.xlsx`}
                    queryData={[this.getIncidentalList]}
                    accept=".xls,.xlsx"
                />
                <SelectForm {...selectFormParams} />
                <TableButtons {...tableButtonsParams} />
                <StandardTable
                    loading={loading}
                    data={incidentalList}
                    selectedRows={selectedRows}
                    onSelectRow={selectedRows => {
                        this.handleStateChange([{ selectedRows }]);
                    }}
                    //旧逻辑
                    // getCheckboxProps={record => {
                    //     return record.billStatus === '' || record.billStatus === 'CONFIRM'
                    //         ? record.source !== 'MANAGE'
                    //             ? true
                    //             : record.status !== 'CONFIRM'
                    //         : true;
                    // }}
                    getCheckboxProps={record => {
                        // 只要账单billStatus 字段不为空 说明已经生成过账单了
                        //来源：车次的，只有已确认的可以生成账单
                        const { billStatus, status, source } = record;
                        const disabled =
                            record.source == 'TRAINS'
                                ? status === 'CONFIRM' || status === 'UNSEALED'
                                : status === 'CONFIRM' || status === 'WAIT' || status === 'UNSEALED'
                        return billStatus ? true : !disabled;
                    }}
                    columns={this.columns}
                    onPaginationChange={this.handleStandardTableChange}
                    expandForm={expandForm}
                    className={this.className}
                    code={codes.page}
                    // disabledSelectedRows={{
                    //     code: ['billStatus', 'source', 'status'],
                    //     value: ['CONFIRM', 'MANAGE', 'CONFIRM'],
                    // }}
                    //杂费管理添加的直接是已确认，车次添加的有草稿状态，车次的只有已确认的才可以生成账单，billStatus有状态值说明已经生成过账单
                    //所以只要状态是已确认的才可以生成账单
                    disabledSelectedRows={{
                        code: ['billStatus', 'status', 'source'],
                        value: ['CONFIRM', 'UNSEALED', 'TRAINS'],
                    }}
                />
                <RightDraw {...rightDrawParams}>
                    <IncidentalDetail detailId={detailId} visible={visible} />
                </RightDraw>

                {visibleBill && (
                    <AdModal
                        visible={visibleBill}
                        title={`生成账单`}
                        onOk={this.handleOk}
                        onCancel={() => {
                            this.modalOs();
                        }}
                        width="60%"
                        style={{
                            maxWidth: 400,
                        }}
                    >
                        <div className={styles.cusModal}>
                            <AntdForm>{formItemFragement(formItem)}</AntdForm>
                        </div>
                    </AdModal>
                )}
                {visibleAddBill && (
                    <AdModal
                        visible={visibleAddBill}
                        title={`加入账单`}
                        onOk={this.handleAddOk}
                        onCancel={() => {
                            this.handleAddBills();
                        }}
                        width="60%"
                        style={{
                            maxWidth: 400,
                        }}
                    >
                        <div className={styles.cusModal}>
                            <AntdForm>{formItemFragement(formItemAdd)}</AntdForm>
                        </div>
                    </AdModal>
                )}
                {visibleIncident && (
                    <Modal
                        visible={visibleIncident}
                        title={`杂费确认`}
                        onOk={this.handleInciOk}
                        onCancel={() => {
                            this.handleAddBills('inciConfirm');
                        }}
                        width={600}

                    >
                        <Table columns={columnInci} dataSource={selectedRows} />
                    </Modal>
                )

                }

            </div>
        );
    }
}
